Refactoring React Component, Nested If/Else to Object Literal

Our mobile application today has dozens of features and screens using ReactJs with Cordova. Due to the large number of screens and the large number of components that compose them, the way to render certain components within certain screens/pages (also React components) has become increasingly complex. The use of If/Else has become a very common practice since the beginning of the App where after a few years it became a nesting of "If's" in certain cases.

We recently had to refactor one of them, a menu with dynamic options where your options vary according to the current screen of the app. Where over time, that component became a series of nested If/Else.

BottomMenu.jsx (before refactoring)

My initial analysis was to look for code that was repeated in the component, and soon I found the method that dealt with these renderings (as seen in the image above), which basically the same structure was repeated as follows:

Imagine a menu with dozens of different options for dozens of different screens, but always repeating the same structure. So, a technique came to my mind that I have already used on other occasions, which allows us to apply a loop using this structure only once.

The technique is about the use of literal objects, assigning to an object a list of other objects, where basically each object represents a menu button and all of them are standardized with the same attributes.

In this case each object has a key, resourceKey, icon, condition, onClickAction …

uiSelectors.js

The "best" is the conditionToShow attribute, which will replace the IFs, using the .filter function where only those that meet this condition will be returned.

The code became much more scalable and organized, gaining a lot in maintainability. Even more to our BottomMenu.jsx view.

A big gain in organization and separation of responsibilities, removing all logic from the view leaving it only responsible for rendering. Now if we want to put one more button on the menu, just add it to the list of objects following the pattern of the previous ones.

So, that's it, the next time you think of an IF to render certain components, remember this possibility of using literal objects.

Train the clinical eye to find code structures that are repeated in the code, never waste an opportunity to give that refactor :). Remember readable code is a good code.